<template>
    <div class="enter-open-view">
        <mt-header fixed title="跟随者" class="mt-header">
            <router-link to="/enter-choose" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        
        <div class="content-page">
            <h3>开设真实账户：</h3>
            <div class="tip-wrap">
                <div class="tip-wrap-img">
                    <div class="tip-wrap-img-left">
                        <img src="@/assets/img/logo.png" alt="">
                    </div>
                    <div class="tip-wrap-img-center">
                        
                    </div>
                    <div class="tip-wrap-img-right">
                        <div v-if="accountInfo.logo">
                            <img :src="accountInfo.logo" alt="">
                        </div>
                        <div v-else>
                            <img src="@/assets/img/logo.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="tip-wrap-txt">
                    <div class="tip-wrap-txt-left">
                        <p>您在社汇圈申请跟随者的操作已完成</p>
                    </div>
                    <div class="tip-wrap-txt-center">
                        
                    </div>
                    <div class="tip-wrap-txt-right">
                        <p>还需要到{{accountInfo.name}}开设真实账户</p>
                    </div>
                </div>
            </div>
            <div class="btns">
                <a :href="accountInfo.href || '#'">去经纪商开户</a>
            </div>
            
        </div>

        <my-footer></my-footer>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        name: 'EnterOpenView',
        data(){
            return {
                accountInfo: {}
            }
        },
        created(){
            this.accountInfo = this.$route.query.accountInfo
        }
    }
</script>

<style scoped>
    .enter-open-view{
        padding: 40px 15px 0 15px;
        text-align: left;
    }
    .mt-header {
        background: #fff;
        color: #666;
        border-bottom: 1px solid #FFF54C;
    }
    .spacing {
        height: 10px;
        background: #eee;
        margin: -1px -15px 0 -15px;
    }
    .content-page p{
        font-size: 12px;
        line-height: 18px;
        color: #666;
    }
    .content-page h3 {
        margin: 15px 0;
        font-size: 16px;
        font-weight: inherit;
        padding-left: 5px;
        color: #666;
    }

    .content-page .btns {
        text-align: center;
    }
    .content-page .btns a {
        display: inline-block;
        margin: 15px auto;
        width: 220px;
        height: 36px;
        line-height: 36px;
        border: none;
        background: #FFF54C;
        border-radius: 3px;
        outline: none;
        color: #666;
        text-decoration: none;
    }
    .tip-wrap-img, .tip-wrap-txt {
        display: flex;
        justify-content: space-between;
    }
    .tip-wrap-img > div, .tip-wrap-txt > div {
        flex: 1;
        text-align: center;
    }
    .tip-wrap-img > div {
        height: 65px;
    }

    .tip-wrap-img-left img, .tip-wrap-img-right img{
        width: 65px; 
        height: 65px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid #ddd;
    }

</style>